<template>
  <div class="nav-tab">
    <div class="tab-btn" :class="{'active': navActive === 1}" @click="navActive = 1;">动态</div>
    <div class="tab-btn" :class="{'active': navActive === 2}" @click="navActive = 2;">学习</div>
    <div class="tab-btn" :class="{'active': navActive === 3}" @click="navActive = 3;">我的</div>
  </div>

  <div class="feed-ul" v-if="navActive === 1">
    <swiper class="swiper" circular :indicator-dots="true" >
      <swiper-item v-for="item in bannerList">
        <image class="swiper-item" :src="item.image"></image>
      </swiper-item>
    </swiper>
    <div class="feed-item" v-for="(item, index) in list" :key="index" @click="onGoDetail(item.article_id)">
      <div class="text-ellipsis name">{{ item.title }}</div>
      <div class="text-ellipsis-2 mark">
        答主是去年参加法考，客观题223分，主观题134分，顺利答主是去年参加法考，客观题223分，主观题134分，顺利一次通过。由于我是大龄在职非法本零考一次通过。由于我是大龄在职非法本零考……
      </div>
      <div class="person-btn">
        <div class="person">
          <image class="person-icon" :src="item.user.avatar"></image>
          <div class="person-name">{{ item.user.nickname }}</div>
<!--          <div class="collect">关注</div>-->
        </div>
        <div class="btns">
          <image class="btn" src="/static/icon/gift.png"></image>
          <image class="btn" src="/static/icon/comment.png"></image>
          <image class="btn" src="/static/icon/share.png"></image>
        </div>
      </div>
    </div>
  </div>

  <div class="feed-ul" v-if="navActive === 2">
    <div class="feed-item good-item" v-for="(item, index) in courseList" :key="index" @click="onGood(item)">
      <image class="good-icon" :src="item.image"></image>
      <div class="good-detail">
        <div class="text-ellipsis name">{{ item.title }}</div>
        <div class="tag">免费</div>
        <div class="btn">马上学习</div>
      </div>
    </div>
  </div>
  <GoodCode v-model="showGood" :qrCode="activeGood.qrcode"></GoodCode>

  <div class="feed-ul" v-if="navActive === 3">
    <div class="feed-item" v-for="(item, index) in list3" :key="index" @click="onGoDetail(item.article_id)">
      <div class="text-ellipsis name">{{ item.title }}</div>
      <div class="text-ellipsis-2 mark">
        答主是去年参加法考，客观题223分，主观题134分，顺利答主是去年参加法考，客观题223分，主观题134分，顺利一次通过。由于我是大龄在职非法本零考一次通过。由于我是大龄在职非法本零考……
      </div>
      <div class="person-btn">
        <div class="person">
          <image class="person-icon" :src="item.user.avatar"></image>
          <div class="person-name">{{ item.user.nickname }}</div>
          <div class="collect">关注</div>
        </div>
        <div class="btns">
          <image class="btn" src="/static/icon/gift.png"></image>
          <image class="btn" src="/static/icon/comment.png"></image>
          <image class="btn" src="/static/icon/share.png"></image>
        </div>
      </div>
    </div>
  </div>


</template>

<script setup lang="ts">
import {onMounted, ref, shallowRef} from "vue";
import {articleList_data, banner_data, courseList_data} from "../../api/Feed";
import useQueryPage from "../../hooks/useQueryPage";
import {goUrl} from "../../utils/UniUtil";
import GoodCode from "./components/GoodCode.vue";
import {MyArticleList_data} from "../../api/user";

const navActive = ref(1);

const {page, list, handleQueryPage, loading} = useQueryPage(articleList_data, {})


const {list: courseList, loading: loading2} = useQueryPage(courseList_data, {})

const {list: list3, loading: loading3} = useQueryPage(MyArticleList_data, {})


const bannerList = shallowRef([]);
onMounted(() => {
  banner_data().then(res => {
    bannerList.value = res
  })
})

const onGoDetail = (id: number) => {
  goUrl('/pages/feed/detail?id=' + id)
}

const showGood = ref(false);
const activeGood = shallowRef({});
const onGood = (item) => {
  showGood.value = true
  activeGood.value = item
}
</script>

<style lang="scss" scoped>
.nav-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 50rpx 40rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.08);

  .tab-btn {
    width: 326rpx;
    height: 68rpx;
    border-radius: 36rpx;
    font-size: 32rpx;
    font-weight: 300;
    line-height: 68rpx;
    text-align: center;
    color: #0D3333;

    &.active {
      background: rgba(36, 250, 246, 0.38);
      font-weight: 500;
    }
  }
}

.feed-ul {
  padding: 32rpx;
  background: #F7F7F7;

  .feed-item {
    padding: 32rpx 38rpx;
    background: #FFFFFF;
    border-radius: 24rpx;
    margin-bottom: 24rpx;

    .name {
      height: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #0D3333;
      line-height: 44rpx;
    }

    .mark {
      font-size: 24rpx;
      font-weight: 400;
      color: #0D3333;
      margin: 30rpx 0 36rpx;
    }
  }
}

.person-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .person {
    display: flex;
    align-items: center;

    .person-icon {
      width: 44rpx;
      height: 44rpx;
      border-radius: 50%;
    }

    .person-name {
      padding: 0 12rpx 0 16rpx;
      font-size: 22rpx;
      font-weight: 400;
      color: #0D3333;
    }

    .collect {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100rpx;
      height: 32rpx;
      background: rgba(36, 250, 246, 0.16);
      border-radius: 20rpx;
      border: 2rpx solid #24FAF6;
      font-size: 20rpx;
      font-weight: 500;
      color: #0D3333;
      //line-height: 32rpx;
      text-align: center;
    }
  }

  .btns {
    display: flex;
    gap: 16rpx;

    .btn {
      width: 42rpx;
      height: 42rpx;
      background: #0D3333;
      border-radius: 50%;
    }
  }
}

.good-item {
  display: flex;
  .good-icon {
    width: 304rpx;
    height: 164rpx;
    border-radius: 20rpx;
  }
  .good-detail {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    padding: 0 0 0 32rpx;
    .name {
      height: 40rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #0D3333;
      line-height: 40rpx;
    }
    .tag {
      width: max-content;
      height: 32rpx;
      background: rgba(36, 250, 246, 0.38);
      border-radius: 12rpx;
      font-size: 22rpx;
      font-weight: 500;
      color: #0D3333;
      line-height: 32rpx;
      text-align: center;
      padding: 0 24rpx;
    }
    .btn {
      width: 288rpx;
      height: 40rpx;
      background: #0D3333;
      border-radius: 36rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #FFFCF2;
      line-height: 40rpx;
      text-align: center;
    }
  }
}

.swiper-item {
  width: 686rpx;
  height: 284rpx;
  border-radius: 40rpx;
  overflow: hidden;
}

image {
  //background: red !important;
}
</style>
